<template>
        <ul class="nav">
            <!-- song/ -->
            <li><router-link to="/">
                <span>歌单</span> <i class="fa fa-list-alt" aria-hidden="true"></i> </router-link></li>
            <li><router-link to="/newSong">
                <span>新歌</span> <i class="fa fa-star-half-o" aria-hidden="true"></i> </router-link></li>
            <li><router-link to="/ranking">
                <span>排行</span> <i class="fa fa-sort-amount-desc" aria-hidden="true"></i> </router-link></li>
            <!-- <li><router-link to="/singer">歌手</router-link></li> -->
            <li><router-link to="/search">
                <span>搜索</span> <i class="fa fa-search" aria-hidden="true"></i> </router-link></li>
      </ul>
</template>
<style lang="less" scoped>
.nav{
    display: flex;
    width: 100%;
    border-bottom: 1px solid #dfdfdf;
    justify-content: space-evenly;
    white-space: nowrap;  //段落中的文本不进行换行
    position: sticky;
    top: 0px;
    z-index: 3;
    background: linear-gradient(to right,#f6f6f3,#edf5f8);
    li{
        line-height: 54px;
        font-size: 16px;
        
        a{
            padding: 0px 15px;
            display: inline-block;
            // color: rgb(180, 7, 248);
            color: #000000;
            &.router-link-exact-active{
            border-bottom: 2px solid #33a3f5;
            color: #33a3f5;
            }
        }
        
    }
}
</style>